<template>
  <div class="app-container">
    商品列表
    <el-table
      :data="
        tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
      "
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column prop="coverImg" label="商品图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.coverImg"
            width="100"
            height="100"
            alt=""
            @click="showDetail(scope.row)"
            style="cursor: pointer"
          />
        </template>
      </el-table-column>
      <el-table-column prop="productCategory.name" label="商品分类" />
      <el-table-column prop="name" label="商品名称" />

      <el-table-column prop="quantity" label="商品库存" />
      <el-table-column label="上架时间">
        <template slot-scope="scope">
          {{ scope.row.createdAt | handleDate }}
        </template>
      </el-table-column>
      <el-table-column label="商品价格">
        <template slot-scope="scope">
          {{ scope.row.price | handlePrice }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editProduct(scope.row)"
            >修改</el-button
          >
          <!-- <el-button type="danger" size="small" @click="del(scope.row)"
            >删除</el-button
          > -->
          <template>
            <el-button type="danger" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改 -->
    <!-- 修改 -->
    <el-dialog title="修改商品信息" :visible.sync="dialogVisible" width="60%">
      <el-form
        ref="product"
        :label-position="labelPosition"
        label-width="80px"
        :model="product"
      >
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://lanlianhua.work:8888/api/v1/common/file_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="product.name" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="product.descriptions" />
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="product.quantity" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="product.price" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editProductContent">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next,jumper"
      :total="totalCount"
      :page-size="PageSize"
      @current-change="handleCountChange"
    />
    <!--  -->
    <slide-view
      :show="showFlag"
      :showFlag.sync="showFlag"
      :message="message"
    ></slide-view>
  </div>
</template>

<script>
import { productList, editProduct, deleteProduct } from '@/api/product'
import slide from '@/views/mixin/slideminxin'
export default {
  mixins: [slide],
  name: 'OrderList',
  components: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [], // 总数据
      currentPage: 1, //  默认显示第几页
      totalCount: 1, // 总条数
      PageSize: 10,
      // 修改框
      labelPosition: 'right',
      imageUrl: '',
      id: '',
      product: {
        name: '',
        descriptions: '',
        quantity: '',
        price: '',
        fenleiid: ''
      },
      loading: true
    }
  },
  created() {
    this.initProduct()
  },

  methods: {
    async initProduct() {
      const result = await productList({
        per: 112,
        page: 1
        // name: "手机",
      })
      console.log(result.products)

      this.tableData = result.products
      this.totalCount = result.products.length

      // 加载状态
      if (this.tableData.length != 0) {
        this.loading = false
      }
    },
    // 分页
    // 显示第几页
    handleCountChange(val) {
      this.currentPage = val
    },

    // 修改商品
    editProduct(product) {
      console.log(product)
      this.dialogVisible = true
      this.imageUrl = product.coverImg // 主图路径
      this.product.name = product.productCategory.name // 分类名
      this.product.descriptions = product.name // 商品简介
      this.product.quantity = product.quantity // 库存
      this.product.price = product.price // 价格
      this.product.fenleiid = product.productCategory._id // 分类id
      this.id = product._id // 商品id
    },
    // 修改图片
    handleAvatarSuccess(res, file) {
      console.log(file)
      console.log(res)
      this.imageUrl = 'http://lanlianhua.work:8888' + res.info
    },

    // 确定修改
    async editProductContent(product) {
      console.log(this.id)
      // 修改接口
      // console.log(this.product.name);
      // console.log(this.product.descriptions);
      // console.log(this.product.quantity);
      // console.log(this.product.price);
      // console.log(this.imageUrl);
      // console.log(this.product.fenleiid);
      const result = await editProduct(this.id, {
        name: this.product.descriptions,
        descriptions: this.product.name,
        quantity: this.product.quantity,
        price: this.product.price,
        coverImg: this.imageUrl,
        productCategory: this.product.fenleiid
      })
      console.log(111, result)
      // 关闭弹框
      this.dialogVisible = false
    },

    // / 删除商品
    async del(product) {
      console.log(product)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log('ok')
          const result = deleteProduct(product._id)
          console.log(result)
          this.tableData.forEach((item, index) => {
            if (item._id == product._id) {
              this.tableData.splice(index, 1)
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          console.log('no')
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 详情
    showDetail(val) {
      delete val.content
      console.log(val)
      this.showSlide(val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/edit.scss';
.el-pagination {
  width: 600px;
  margin: 50px auto;
}
.el-pagination >>> li,
.el-pagination >>> button {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
body {
  position: relative;
}
</style>
